'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var dayjs = require('dayjs');
var customParseFormat = require('dayjs/plugin/customParseFormat');
var directives = require('../directives');
var ElInput = require('../el-input');
var ElPopper = require('../el-popper');
var aria = require('../utils/aria');
var util = require('../utils/util');
var form = require('../el-form');
var validators = require('../utils/validators');
var locale = require('../locale');
var debounce = require('lodash/debounce');
var ElScrollbar = require('../el-scrollbar');
var union = require('lodash/union');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
var customParseFormat__default = /*#__PURE__*/_interopDefaultLegacy(customParseFormat);
var ElInput__default = /*#__PURE__*/_interopDefaultLegacy(ElInput);
var ElPopper__default = /*#__PURE__*/_interopDefaultLegacy(ElPopper);
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
var ElScrollbar__default = /*#__PURE__*/_interopDefaultLegacy(ElScrollbar);
var union__default = /*#__PURE__*/_interopDefaultLegacy(union);

const DEFAULT_FORMATS_TIME = 'HH:mm:ss';
const DEFAULT_FORMATS_DATE = 'YYYY-MM-DD';
const DEFAULT_FORMATS_DATEPICKER = {
    date: DEFAULT_FORMATS_DATE,
    week: 'gggg[w]ww',
    year: 'YYYY',
    month: 'YYYY-MM',
    datetime: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
    monthrange: 'YYYY-MM',
    daterange: DEFAULT_FORMATS_DATE,
    datetimerange: `${DEFAULT_FORMATS_DATE} ${DEFAULT_FORMATS_TIME}`,
};

const defaultProps = {
    name: {
        type: [Array, String],
        default: '',
    },
    popperClass: {
        type: String,
        default: '',
    },
    format: {
        type: String,
    },
    type: {
        type: String,
        default: '',
    },
    clearable: {
        type: Boolean,
        default: true,
    },
    clearIcon: {
        type: String,
        default: 'el-icon-circle-close',
    },
    editable: {
        type: Boolean,
        default: true,
    },
    prefixIcon: {
        type: String,
        default: '',
    },
    size: {
        type: String,
        validator: validators.isValidComponentSize,
    },
    readonly: {
        type: Boolean,
        default: false,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    placeholder: {
        type: String,
        default: '',
    },
    modelValue: {
        type: [Date, Array, String],
        default: '',
    },
    rangeSeparator: {
        type: String,
        default: '-',
    },
    startPlaceholder: String,
    endPlaceholder: String,
    defaultValue: {
        type: [Date, Array],
    },
    defaultTime: {
        type: [Date, Array],
    },
    isRange: {
        type: Boolean,
        default: false,
    },
    disabledHours: {
        type: Function,
    },
    disabledMinutes: {
        type: Function,
    },
    disabledSeconds: {
        type: Function,
    },
    disabledDate: {
        type: Function,
    },
    cellClassName: {
        type: Function,
    },
    shortcuts: {
        type: Array,
        default: () => ([]),
    },
    arrowControl: {
        type: Boolean,
        default: false,
    },
    validateEvent: {
        type: Boolean,
        default: true,
    },
    unlinkPanels: Boolean,
};

const dateEquals = function (a, b) {
    const aIsDate = a instanceof Date;
    const bIsDate = b instanceof Date;
    if (aIsDate && bIsDate) {
        return a.getTime() === b.getTime();
    }
    if (!aIsDate && !bIsDate) {
        return a === b;
    }
    return false;
};
const valueEquals = function (a, b) {
    const aIsArray = a instanceof Array;
    const bIsArray = b instanceof Array;
    if (aIsArray && bIsArray) {
        if (a.length !== b.length) {
            return false;
        }
        return a.every((item, index) => dateEquals(item, b[index]));
    }
    if (!aIsArray && !bIsArray) {
        return dateEquals(a, b);
    }
    return false;
};
var script = vue.defineComponent({
    name: 'Picker',
    components: {
        ElInput: ElInput__default['default'],
        ElPopper: ElPopper__default['default'],
    },
    directives: { clickoutside: directives.ClickOutside },
    props: defaultProps,
    emits: ['update:modelValue', 'change', 'focus', 'blur'],
    setup(props, ctx) {
        const ELEMENT = util.useGlobalConfig();
        const elForm = vue.inject(form.elFormKey, {});
        const elFormItem = vue.inject(form.elFormItemKey, {});
        const refPopper = vue.ref(null);
        const pickerVisible = vue.ref(false);
        const pickerActualVisible = vue.ref(false);
        const valueOnOpen = vue.ref(null);
        vue.watch(pickerVisible, val => {
            var _a;
            if (!val) {
                userInput.value = null;
                ctx.emit('blur');
                blurInput();
                props.validateEvent && ((_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.blur'));
            }
            else {
                valueOnOpen.value = props.modelValue;
            }
        });
        const emitChange = (val, isClear) => {
            var _a;
            if (isClear || !valueEquals(val, valueOnOpen.value)) {
                ctx.emit('change', val);
                props.validateEvent && ((_a = elFormItem.formItemMitt) === null || _a === void 0 ? void 0 : _a.emit('el.form.change', val));
            }
        };
        const emitInput = val => {
            if (!valueEquals(props.modelValue, val)) {
                ctx.emit('update:modelValue', val);
            }
        };
        const refInput = vue.computed(() => {
            if (refPopper.value.triggerRef) {
                const _r = isRangeInput.value ? refPopper.value.triggerRef : refPopper.value.triggerRef.$el;
                return [].slice.call(_r.querySelectorAll('input'));
            }
            return [];
        });
        const setSelectionRange = (start, end, pos) => {
            const _inputs = refInput.value;
            if (!_inputs.length)
                return;
            if (!pos || pos === 'min') {
                _inputs[0].setSelectionRange(start, end);
                _inputs[0].focus();
            }
            else if (pos === 'max') {
                _inputs[1].setSelectionRange(start, end);
                _inputs[1].focus();
            }
        };
        const onPick = (date = '', visible = false) => {
            pickerVisible.value = visible;
            let result;
            if (Array.isArray(date)) {
                result = date.map(_ => _.toDate());
            }
            else {
                result = date ? date.toDate() : date;
            }
            userInput.value = null;
            emitInput(result);
            emitChange(result);
        };
        const handleFocus = e => {
            if (props.readonly || pickerDisabled.value)
                return;
            pickerVisible.value = true;
            ctx.emit('focus', e);
        };
        const pickerDisabled = vue.computed(() => {
            return props.disabled || elForm.disabled;
        });
        const parsedValue = vue.computed(() => {
            let result;
            if (valueIsEmpty.value) {
                if (pickerOptions.value.getDefaultValue) {
                    result = pickerOptions.value.getDefaultValue();
                }
            }
            else {
                if (Array.isArray(props.modelValue)) {
                    result = props.modelValue.map(_ => dayjs__default['default'](_));
                }
                else {
                    result = dayjs__default['default'](props.modelValue);
                }
            }
            if (pickerOptions.value.getRangeAvaliableTime) {
                result = pickerOptions.value.getRangeAvaliableTime(result);
            }
            return result;
        });
        const displayValue = vue.computed(() => {
            if (!pickerOptions.value.panelReady)
                return;
            const formattedValue = formatDayjsToString(parsedValue.value);
            if (Array.isArray(userInput.value)) {
                return [
                    userInput.value[0] || (formattedValue && formattedValue[0]) || '',
                    userInput.value[1] || (formattedValue && formattedValue[1]) || '',
                ];
            }
            else if (userInput.value !== null) {
                return userInput.value;
            }
            if (!isTimePicker.value && valueIsEmpty.value)
                return;
            if (!pickerVisible.value && valueIsEmpty.value)
                return;
            if (formattedValue) {
                return isDatesPicker.value
                    ? formattedValue.join(', ')
                    : formattedValue;
            }
            return '';
        });
        const isTimeLikePicker = vue.computed(() => {
            return props.type.indexOf('time') !== -1;
        });
        const isTimePicker = vue.computed(() => {
            return props.type.indexOf('time') === 0;
        });
        const isDatesPicker = vue.computed(() => {
            return props.type === 'dates';
        });
        const triggerClass = vue.computed(() => {
            return props.prefixIcon || (isTimeLikePicker.value ? 'el-icon-time' : 'el-icon-date');
        });
        const showClose = vue.ref(false);
        const onClearIconClick = event => {
            if (props.readonly || pickerDisabled.value)
                return;
            if (showClose.value) {
                event.stopPropagation();
                emitInput(null);
                emitChange(null, true);
                showClose.value = false;
                pickerVisible.value = false;
                pickerOptions.value.handleClear && pickerOptions.value.handleClear();
            }
        };
        const valueIsEmpty = vue.computed(() => {
            return !props.modelValue || (Array.isArray(props.modelValue) && !props.modelValue.length);
        });
        const onMouseEnter = () => {
            if (props.readonly || pickerDisabled.value)
                return;
            if (!valueIsEmpty.value && props.clearable) {
                showClose.value = true;
            }
        };
        const onMouseLeave = () => {
            showClose.value = false;
        };
        const isRangeInput = vue.computed(() => {
            return props.type.indexOf('range') > -1;
        });
        const pickerSize = vue.computed(() => {
            return props.size || elFormItem.size || ELEMENT.size;
        });
        const onClickOutside = () => {
            if (!pickerVisible.value)
                return;
            pickerVisible.value = false;
        };
        const userInput = vue.ref(null);
        const handleChange = () => {
            if (userInput.value) {
                const value = parseUserInputToDayjs(displayValue.value);
                if (value) {
                    if (isValidValue(value)) {
                        emitInput(Array.isArray(value) ? value.map(_ => _.toDate()) : value.toDate());
                        userInput.value = null;
                    }
                }
            }
            if (userInput.value === '') {
                emitInput(null);
                emitChange(null);
                userInput.value = null;
            }
        };
        const blurInput = () => {
            refInput.value.forEach(input => input.blur());
        };
        const parseUserInputToDayjs = value => {
            if (!value)
                return null;
            return pickerOptions.value.parseUserInput(value);
        };
        const formatDayjsToString = value => {
            if (!value)
                return null;
            return pickerOptions.value.formatToString(value);
        };
        const isValidValue = value => {
            return pickerOptions.value.isValidValue(value);
        };
        const handleKeydown = event => {
            const code = event.code;
            if (code === aria.EVENT_CODE.esc) {
                pickerVisible.value = false;
                event.stopPropagation();
                return;
            }
            if (code === aria.EVENT_CODE.tab) {
                if (!isRangeInput.value) {
                    handleChange();
                    pickerVisible.value = false;
                    event.stopPropagation();
                }
                else {
                    setTimeout(() => {
                        if (refInput.value.indexOf(document.activeElement) === -1) {
                            pickerVisible.value = false;
                            blurInput();
                        }
                    }, 0);
                }
                return;
            }
            if (code === aria.EVENT_CODE.enter) {
                if (userInput.value === '' || isValidValue(parseUserInputToDayjs(displayValue.value))) {
                    handleChange();
                    pickerVisible.value = false;
                }
                event.stopPropagation();
                return;
            }
            if (userInput.value) {
                event.stopPropagation();
                return;
            }
            if (pickerOptions.value.handleKeydown) {
                pickerOptions.value.handleKeydown(event);
            }
        };
        const onUserInput = e => {
            userInput.value = e;
        };
        const handleStartInput = event => {
            if (userInput.value) {
                userInput.value = [event.target.value, userInput.value[1]];
            }
            else {
                userInput.value = [event.target.value, null];
            }
        };
        const handleEndInput = event => {
            if (userInput.value) {
                userInput.value = [userInput.value[0], event.target.value];
            }
            else {
                userInput.value = [null, event.target.value];
            }
        };
        const handleStartChange = () => {
            const value = parseUserInputToDayjs(userInput.value && userInput.value[0]);
            if (value && value.isValid()) {
                userInput.value = [formatDayjsToString(value), displayValue.value[1]];
                const newValue = [value, parsedValue.value && parsedValue.value[1]];
                if (isValidValue(newValue)) {
                    emitInput(newValue);
                    userInput.value = null;
                }
            }
        };
        const handleEndChange = () => {
            const value = parseUserInputToDayjs(userInput.value && userInput.value[1]);
            if (value && value.isValid()) {
                userInput.value = [displayValue.value[0], formatDayjsToString(value)];
                const newValue = [parsedValue.value && parsedValue.value[0], value];
                if (isValidValue(newValue)) {
                    emitInput(newValue);
                    userInput.value = null;
                }
            }
        };
        const pickerOptions = vue.ref({});
        const onSetPickerOption = e => {
            pickerOptions.value[e[0]] = e[1];
            pickerOptions.value.panelReady = true;
        };
        vue.provide('EP_PICKER_BASE', {
            props,
        });
        return {
            isDatesPicker,
            handleEndChange,
            handleStartChange,
            handleStartInput,
            handleEndInput,
            onUserInput,
            handleChange,
            handleKeydown,
            onClickOutside,
            pickerSize,
            isRangeInput,
            onMouseLeave,
            onMouseEnter,
            onClearIconClick,
            showClose,
            triggerClass,
            onPick,
            handleFocus,
            pickerVisible,
            pickerActualVisible,
            displayValue,
            parsedValue,
            setSelectionRange,
            refPopper,
            pickerDisabled,
            onSetPickerOption,
        };
    },
});

const _hoisted_1 = { class: "el-range-separator" };

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_input = vue.resolveComponent("el-input");
  const _component_el_popper = vue.resolveComponent("el-popper");
  const _directive_clickoutside = vue.resolveDirective("clickoutside");

  return (vue.openBlock(), vue.createBlock(_component_el_popper, vue.mergeProps({
    ref: "refPopper",
    visible: _ctx.pickerVisible,
    "onUpdate:visible": _cache[18] || (_cache[18] = $event => (_ctx.pickerVisible = $event)),
    "manual-mode": "",
    effect: "light",
    pure: "",
    trigger: "click"
  }, _ctx.$attrs, {
    "popper-class": `el-picker__popper ${_ctx.popperClass}`,
    transition: "el-zoom-in-top",
    "gpu-acceleration": false,
    "stop-popper-mouse-event": false,
    "append-to-body": "",
    onBeforeEnter: _cache[19] || (_cache[19] = $event => (_ctx.pickerActualVisible = true)),
    onAfterLeave: _cache[20] || (_cache[20] = $event => (_ctx.pickerActualVisible = false))
  }), {
    trigger: vue.withCtx(() => [
      (!_ctx.isRangeInput)
        ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_input, {
            key: 0,
            "model-value": _ctx.displayValue,
            name: _ctx.name,
            size: _ctx.pickerSize,
            disabled: _ctx.pickerDisabled,
            placeholder: _ctx.placeholder,
            class: ["el-date-editor", 'el-date-editor--' + _ctx.type],
            readonly: !_ctx.editable || _ctx.readonly || _ctx.isDatesPicker || _ctx.type === 'week',
            onInput: _ctx.onUserInput,
            onFocus: _ctx.handleFocus,
            onKeydown: _ctx.handleKeydown,
            onChange: _ctx.handleChange,
            onMouseenter: _ctx.onMouseEnter,
            onMouseleave: _ctx.onMouseLeave
          }, {
            prefix: vue.withCtx(() => [
              vue.createVNode("i", {
                class: ["el-input__icon", _ctx.triggerClass],
                onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args)))
              }, null, 2 /* CLASS */)
            ]),
            suffix: vue.withCtx(() => [
              vue.createVNode("i", {
                class: ["el-input__icon", [_ctx.showClose ? '' + _ctx.clearIcon : '']],
                onClick: _cache[2] || (_cache[2] = (...args) => (_ctx.onClearIconClick && _ctx.onClearIconClick(...args)))
              }, null, 2 /* CLASS */)
            ]),
            _: 1 /* STABLE */
          }, 8 /* PROPS */, ["model-value", "name", "size", "disabled", "placeholder", "class", "readonly", "onInput", "onFocus", "onKeydown", "onChange", "onMouseenter", "onMouseleave"])), [
            [_directive_clickoutside, _ctx.onClickOutside]
          ])
        : vue.withDirectives((vue.openBlock(), vue.createBlock("div", {
            key: 1,
            class: ["el-date-editor el-range-editor el-input__inner", [
          'el-date-editor--' + _ctx.type,
          _ctx.pickerSize ? `el-range-editor--${ _ctx.pickerSize }` : '',
          _ctx.pickerDisabled ? 'is-disabled' : '',
          _ctx.pickerVisible ? 'is-active' : ''
        ]],
            onClick: _cache[10] || (_cache[10] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))),
            onMouseenter: _cache[11] || (_cache[11] = (...args) => (_ctx.onMouseEnter && _ctx.onMouseEnter(...args))),
            onMouseleave: _cache[12] || (_cache[12] = (...args) => (_ctx.onMouseLeave && _ctx.onMouseLeave(...args))),
            onKeydown: _cache[13] || (_cache[13] = (...args) => (_ctx.handleKeydown && _ctx.handleKeydown(...args)))
          }, [
            vue.createVNode("i", {
              class: ['el-input__icon', 'el-range__icon', _ctx.triggerClass]
            }, null, 2 /* CLASS */),
            vue.createVNode("input", {
              autocomplete: "off",
              name: _ctx.name && _ctx.name[0],
              placeholder: _ctx.startPlaceholder,
              value: _ctx.displayValue && _ctx.displayValue[0],
              disabled: _ctx.pickerDisabled,
              readonly: !_ctx.editable || _ctx.readonly,
              class: "el-range-input",
              onInput: _cache[3] || (_cache[3] = (...args) => (_ctx.handleStartInput && _ctx.handleStartInput(...args))),
              onChange: _cache[4] || (_cache[4] = (...args) => (_ctx.handleStartChange && _ctx.handleStartChange(...args))),
              onFocus: _cache[5] || (_cache[5] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args)))
            }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["name", "placeholder", "value", "disabled", "readonly"]),
            vue.renderSlot(_ctx.$slots, "range-separator", {}, () => [
              vue.createVNode("span", _hoisted_1, vue.toDisplayString(_ctx.rangeSeparator), 1 /* TEXT */)
            ]),
            vue.createVNode("input", {
              autocomplete: "off",
              name: _ctx.name && _ctx.name[1],
              placeholder: _ctx.endPlaceholder,
              value: _ctx.displayValue && _ctx.displayValue[1],
              disabled: _ctx.pickerDisabled,
              readonly: !_ctx.editable || _ctx.readonly,
              class: "el-range-input",
              onFocus: _cache[6] || (_cache[6] = (...args) => (_ctx.handleFocus && _ctx.handleFocus(...args))),
              onInput: _cache[7] || (_cache[7] = (...args) => (_ctx.handleEndInput && _ctx.handleEndInput(...args))),
              onChange: _cache[8] || (_cache[8] = (...args) => (_ctx.handleEndChange && _ctx.handleEndChange(...args)))
            }, null, 40 /* PROPS, HYDRATE_EVENTS */, ["name", "placeholder", "value", "disabled", "readonly"]),
            vue.createVNode("i", {
              class: [[_ctx.showClose ? '' + _ctx.clearIcon : ''], "el-input__icon el-range__close-icon"],
              onClick: _cache[9] || (_cache[9] = (...args) => (_ctx.onClearIconClick && _ctx.onClearIconClick(...args)))
            }, null, 2 /* CLASS */)
          ], 34 /* CLASS, HYDRATE_EVENTS */)), [
            [_directive_clickoutside, _ctx.onClickOutside]
          ])
    ]),
    default: vue.withCtx(() => [
      vue.renderSlot(_ctx.$slots, "default", {
        visible: _ctx.pickerVisible,
        actualVisible: _ctx.pickerActualVisible,
        parsedValue: _ctx.parsedValue,
        format: _ctx.format,
        unlinkPanels: _ctx.unlinkPanels,
        type: _ctx.type,
        defaultValue: _ctx.defaultValue,
        onPick: _cache[14] || (_cache[14] = (...args) => (_ctx.onPick && _ctx.onPick(...args))),
        onSelectRange: _cache[15] || (_cache[15] = (...args) => (_ctx.setSelectionRange && _ctx.setSelectionRange(...args))),
        onSetPickerOption: _cache[16] || (_cache[16] = (...args) => (_ctx.onSetPickerOption && _ctx.onSetPickerOption(...args))),
        onMousedown: _cache[17] || (_cache[17] = vue.withModifiers(() => {}, ["stop"]))
      })
    ]),
    _: 1 /* STABLE */
  }, 16 /* FULL_PROPS */, ["visible", "popper-class"]))
}

script.render = render;
script.__file = "packages/time-picker/src/common/picker.vue";

const makeList = (total, method, methodFunc) => {
    const arr = [];
    const disabledArr = method && methodFunc();
    for (let i = 0; i < total; i++) {
        arr[i] = disabledArr ? disabledArr.includes(i) : false;
    }
    return arr;
};
const makeAvaliableArr = list => {
    return list.map((_, index) => !_ ? index : _).filter(_ => _ !== true);
};
const getTimeLists = (disabledHours, disabledMinutes, disabledSeconds) => {
    const getHoursList = (role, compare) => {
        return makeList(24, disabledHours, () => disabledHours(role, compare));
    };
    const getMinutesList = (hour, role, compare) => {
        return makeList(60, disabledMinutes, () => disabledMinutes(hour, role, compare));
    };
    const getSecondsList = (hour, minute, role, compare) => {
        return makeList(60, disabledSeconds, () => disabledSeconds(hour, minute, role, compare));
    };
    return {
        getHoursList,
        getMinutesList,
        getSecondsList,
    };
};
const getAvaliableArrs = (disabledHours, disabledMinutes, disabledSeconds) => {
    const { getHoursList, getMinutesList, getSecondsList, } = getTimeLists(disabledHours, disabledMinutes, disabledSeconds);
    const getAvaliableHours = (role, compare) => {
        return makeAvaliableArr(getHoursList(role, compare));
    };
    const getAvaliableMinutes = (hour, role, compare) => {
        return makeAvaliableArr(getMinutesList(hour, role, compare));
    };
    const getAvaliableSeconds = (hour, minute, role, compare) => {
        return makeAvaliableArr(getSecondsList(hour, minute, role, compare));
    };
    return {
        getAvaliableHours,
        getAvaliableMinutes,
        getAvaliableSeconds,
    };
};

var script$1 = vue.defineComponent({
    directives: {
        repeatClick: directives.RepeatClick,
    },
    components: {
        ElScrollbar: ElScrollbar__default['default'],
    },
    props: {
        role: {
            type: String,
            required: true,
        },
        spinnerDate: {
            type: Object,
            required: true,
        },
        showSeconds: {
            type: Boolean,
            default: true,
        },
        arrowControl: Boolean,
        amPmMode: {
            type: String,
            default: '',
        },
        disabledHours: {
            type: Function,
        },
        disabledMinutes: {
            type: Function,
        },
        disabledSeconds: {
            type: Function,
        },
    },
    emits: ['change', 'select-range', 'set-option'],
    setup(props, ctx) {
        let isScrolling = false;
        const debouncedResetScroll = debounce__default['default'](type => {
            isScrolling = false;
            adjustCurrentSpinner(type);
        }, 200);
        const currentScrollbar = vue.ref(null);
        const listHoursRef = vue.ref(null);
        const listMinutesRef = vue.ref(null);
        const listSecondsRef = vue.ref(null);
        const listRefsMap = {
            hours: listHoursRef, minutes: listMinutesRef, seconds: listSecondsRef,
        };
        const spinnerItems = vue.computed(() => {
            const arr = ['hours', 'minutes', 'seconds'];
            return props.showSeconds ? arr : arr.slice(0, 2);
        });
        const hours = vue.computed(() => {
            return props.spinnerDate.hour();
        });
        const minutes = vue.computed(() => {
            return props.spinnerDate.minute();
        });
        const seconds = vue.computed(() => {
            return props.spinnerDate.second();
        });
        const timePartsMap = vue.computed(() => ({
            hours, minutes, seconds,
        }));
        const hoursList = vue.computed(() => {
            return getHoursList(props.role);
        });
        const minutesList = vue.computed(() => {
            return getMinutesList(hours.value, props.role);
        });
        const secondsList = vue.computed(() => {
            return getSecondsList(hours.value, minutes.value, props.role);
        });
        const listMap = vue.computed(() => ({
            hours: hoursList,
            minutes: minutesList,
            seconds: secondsList,
        }));
        const arrowHourList = vue.computed(() => {
            const hour = hours.value;
            return [
                hour > 0 ? hour - 1 : undefined,
                hour,
                hour < 23 ? hour + 1 : undefined,
            ];
        });
        const arrowMinuteList = vue.computed(() => {
            const minute = minutes.value;
            return [
                minute > 0 ? minute - 1 : undefined,
                minute,
                minute < 59 ? minute + 1 : undefined,
            ];
        });
        const arrowSecondList = vue.computed(() => {
            const second = seconds.value;
            return [
                second > 0 ? second - 1 : undefined,
                second,
                second < 59 ? second + 1 : undefined,
            ];
        });
        const arrowListMap = vue.computed(() => ({
            hours: arrowHourList,
            minutes: arrowMinuteList,
            seconds: arrowSecondList,
        }));
        const getAmPmFlag = hour => {
            let shouldShowAmPm = !!props.amPmMode;
            if (!shouldShowAmPm)
                return '';
            let isCapital = props.amPmMode === 'A';
            let content = (hour < 12) ? ' am' : ' pm';
            if (isCapital)
                content = content.toUpperCase();
            return content;
        };
        const emitSelectRange = type => {
            if (type === 'hours') {
                ctx.emit('select-range', 0, 2);
            }
            else if (type === 'minutes') {
                ctx.emit('select-range', 3, 5);
            }
            else if (type === 'seconds') {
                ctx.emit('select-range', 6, 8);
            }
            currentScrollbar.value = type;
        };
        const adjustCurrentSpinner = type => {
            adjustSpinner(type, timePartsMap.value[type].value);
        };
        const adjustSpinners = () => {
            adjustCurrentSpinner('hours');
            adjustCurrentSpinner('minutes');
            adjustCurrentSpinner('seconds');
        };
        const adjustSpinner = (type, value) => {
            if (props.arrowControl)
                return;
            const el = listRefsMap[type];
            if (el.value) {
                el.value.$el.querySelector('.el-scrollbar__wrap').scrollTop = Math.max(0, value * typeItemHeight(type));
            }
        };
        const typeItemHeight = type => {
            const el = listRefsMap[type];
            return el.value.$el.querySelector('li').offsetHeight;
        };
        const onIncreaseClick = () => {
            scrollDown(1);
        };
        const onDecreaseClick = () => {
            scrollDown(-1);
        };
        const scrollDown = step => {
            if (!currentScrollbar.value) {
                emitSelectRange('hours');
            }
            const label = currentScrollbar.value;
            let now = timePartsMap.value[label].value;
            const total = currentScrollbar.value === 'hours' ? 24 : 60;
            now = (now + step + total) % total;
            modifyDateField(label, now);
            adjustSpinner(label, now);
            vue.nextTick(() => emitSelectRange(currentScrollbar.value));
        };
        const modifyDateField = (type, value) => {
            const list = listMap.value[type].value;
            const isDisabled = list[value];
            if (isDisabled)
                return;
            switch (type) {
                case 'hours':
                    ctx.emit('change', props.spinnerDate
                        .hour(value)
                        .minute(minutes.value)
                        .second(seconds.value));
                    break;
                case 'minutes':
                    ctx.emit('change', props.spinnerDate
                        .hour(hours.value)
                        .minute(value)
                        .second(seconds.value));
                    break;
                case 'seconds':
                    ctx.emit('change', props.spinnerDate
                        .hour(hours.value)
                        .minute(minutes.value)
                        .second(value));
                    break;
            }
        };
        const handleClick = (type, { value, disabled }) => {
            if (!disabled) {
                modifyDateField(type, value);
                emitSelectRange(type);
                adjustSpinner(type, value);
            }
        };
        const handleScroll = type => {
            isScrolling = true;
            debouncedResetScroll(type);
            const value = Math.min(Math.round((listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap').scrollTop - (scrollBarHeight(type) * 0.5 - 10) / typeItemHeight(type) + 3) / typeItemHeight(type)), (type === 'hours' ? 23 : 59));
            modifyDateField(type, value);
        };
        const scrollBarHeight = type => {
            return listRefsMap[type].value.$el.offsetHeight;
        };
        const bindScrollEvent = () => {
            const bindFuntion = type => {
                if (listRefsMap[type].value) {
                    listRefsMap[type].value.$el.querySelector('.el-scrollbar__wrap').onscroll = () => {
                        handleScroll(type);
                    };
                }
            };
            bindFuntion('hours');
            bindFuntion('minutes');
            bindFuntion('seconds');
        };
        vue.onMounted(() => {
            vue.nextTick(() => {
                !props.arrowControl && bindScrollEvent();
                adjustSpinners();
                if (props.role === 'start')
                    emitSelectRange('hours');
            });
        });
        const getRefId = item => {
            return `list${item.charAt(0).toUpperCase() + item.slice(1)}Ref`;
        };
        ctx.emit('set-option', [`${props.role}_scrollDown`, scrollDown]);
        ctx.emit('set-option', [`${props.role}_emitSelectRange`, emitSelectRange]);
        const { getHoursList, getMinutesList, getSecondsList, } = getTimeLists(props.disabledHours, props.disabledMinutes, props.disabledSeconds);
        vue.watch(() => props.spinnerDate, () => {
            if (isScrolling)
                return;
            adjustSpinners();
        });
        return {
            getRefId,
            spinnerItems,
            currentScrollbar,
            hours,
            minutes,
            seconds,
            hoursList,
            minutesList,
            arrowHourList,
            arrowMinuteList,
            arrowSecondList,
            getAmPmFlag,
            emitSelectRange,
            adjustCurrentSpinner,
            typeItemHeight,
            listHoursRef,
            listMinutesRef,
            listSecondsRef,
            onIncreaseClick,
            onDecreaseClick,
            handleClick,
            secondsList,
            timePartsMap,
            arrowListMap,
            listMap,
        };
    },
});

const _hoisted_1$1 = { class: "el-time-spinner__arrow el-icon-arrow-up" };
const _hoisted_2 = { class: "el-time-spinner__arrow el-icon-arrow-down" };
const _hoisted_3 = { class: "el-time-spinner__list" };

function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
  const _directive_repeat_click = vue.resolveDirective("repeat-click");

  return (vue.openBlock(), vue.createBlock("div", {
    class: ["el-time-spinner", { 'has-seconds': _ctx.showSeconds }]
  }, [
    (!_ctx.arrowControl)
      ? (vue.openBlock(true), vue.createBlock(vue.Fragment, { key: 0 }, vue.renderList(_ctx.spinnerItems, (item) => {
          return (vue.openBlock(), vue.createBlock(_component_el_scrollbar, {
            key: item,
            ref: _ctx.getRefId(item),
            class: "el-time-spinner__wrapper",
            "wrap-style": "max-height: inherit;",
            "view-class": "el-time-spinner__list",
            noresize: "",
            tag: "ul",
            onMouseenter: $event => (_ctx.emitSelectRange(item)),
            onMousemove: $event => (_ctx.adjustCurrentSpinner(item))
          }, {
            default: vue.withCtx(() => [
              (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.listMap[item].value, (disabled, key) => {
                return (vue.openBlock(), vue.createBlock("li", {
                  key: key,
                  class: ["el-time-spinner__item", { 'active': key === _ctx.timePartsMap[item].value, disabled }],
                  onClick: $event => (_ctx.handleClick(item, { value: key, disabled }))
                }, [
                  (item === 'hours')
                    ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
                        vue.createTextVNode(vue.toDisplayString(('0' + (_ctx.amPmMode ? (key % 12 || 12) : key )).slice(-2)) + vue.toDisplayString(_ctx.getAmPmFlag(key)), 1 /* TEXT */)
                      ], 64 /* STABLE_FRAGMENT */))
                    : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 1 }, [
                        vue.createTextVNode(vue.toDisplayString(('0' + key).slice(-2)), 1 /* TEXT */)
                      ], 64 /* STABLE_FRAGMENT */))
                ], 10 /* CLASS, PROPS */, ["onClick"]))
              }), 128 /* KEYED_FRAGMENT */))
            ]),
            _: 2 /* DYNAMIC */
          }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onMouseenter", "onMousemove"]))
        }), 128 /* KEYED_FRAGMENT */))
      : vue.createCommentVNode("v-if", true),
    (_ctx.arrowControl)
      ? (vue.openBlock(true), vue.createBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.spinnerItems, (item) => {
          return (vue.openBlock(), vue.createBlock("div", {
            key: item,
            class: "el-time-spinner__wrapper is-arrow",
            onMouseenter: $event => (_ctx.emitSelectRange(item))
          }, [
            vue.withDirectives(vue.createVNode("i", _hoisted_1$1, null, 512 /* NEED_PATCH */), [
              [_directive_repeat_click, _ctx.onDecreaseClick]
            ]),
            vue.withDirectives(vue.createVNode("i", _hoisted_2, null, 512 /* NEED_PATCH */), [
              [_directive_repeat_click, _ctx.onIncreaseClick]
            ]),
            vue.createVNode("ul", _hoisted_3, [
              (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.arrowListMap[item].value, (time, key) => {
                return (vue.openBlock(), vue.createBlock("li", {
                  key: key,
                  class: ["el-time-spinner__item", { 'active': time === _ctx.timePartsMap[item].value, 'disabled': _ctx.listMap[item].value[time] }]
                }, vue.toDisplayString(time === undefined ? '' : ('0' + (_ctx.amPmMode ? (time % 12 || 12) : time )).slice(-2) + _ctx.getAmPmFlag(time)), 3 /* TEXT, CLASS */))
              }), 128 /* KEYED_FRAGMENT */))
            ])
          ], 40 /* PROPS, HYDRATE_EVENTS */, ["onMouseenter"]))
        }), 128 /* KEYED_FRAGMENT */))
      : vue.createCommentVNode("v-if", true)
  ], 2 /* CLASS */))
}

script$1.render = render$1;
script$1.__file = "packages/time-picker/src/time-picker-com/basic-time-spinner.vue";

var script$2 = vue.defineComponent({
    components: {
        TimeSpinner: script$1,
    },
    props: {
        visible: Boolean,
        actualVisible: {
            type: Boolean,
            default: undefined,
        },
        datetimeRole: {
            type: String,
        },
        parsedValue: {
            type: [Object, String],
        },
        format: {
            type: String,
            default: '',
        },
    },
    emits: ['pick', 'select-range', 'set-picker-option'],
    setup(props, ctx) {
        const selectionRange = vue.ref([0, 2]);
        const oldValue = vue.ref(props.parsedValue);
        const transitionName = vue.computed(() => {
            return props.actualVisible === undefined ? 'el-zoom-in-top' : '';
        });
        const showSeconds = vue.computed(() => {
            return props.format.includes('ss');
        });
        const amPmMode = vue.computed(() => {
            if (props.format.includes('A'))
                return 'A';
            if (props.format.includes('a'))
                return 'a';
            return '';
        });
        const isValidValue = _date => {
            const parsedDate = dayjs__default['default'](_date);
            const result = getRangeAvaliableTime(parsedDate);
            return parsedDate.isSame(result);
        };
        const handleCancel = () => {
            ctx.emit('pick', oldValue.value, false);
        };
        const handleConfirm = (visible = false, first) => {
            if (first)
                return;
            ctx.emit('pick', props.parsedValue, visible);
        };
        const handleChange = (_date) => {
            if (!props.visible) {
                return;
            }
            const result = getRangeAvaliableTime(_date).millisecond(0);
            ctx.emit('pick', result, true);
        };
        const setSelectionRange = (start, end) => {
            ctx.emit('select-range', start, end);
            selectionRange.value = [start, end];
        };
        const changeSelectionRange = step => {
            const list = [0, 3].concat(showSeconds.value ? [6] : []);
            const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : []);
            const index = list.indexOf(selectionRange.value[0]);
            const next = (index + step + list.length) % list.length;
            timePickeOptions['start_emitSelectRange'](mapping[next]);
        };
        const handleKeydown = event => {
            const code = event.code;
            if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.right) {
                const step = (code === aria.EVENT_CODE.left) ? -1 : 1;
                changeSelectionRange(step);
                event.preventDefault();
                return;
            }
            if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.down) {
                const step = (code === aria.EVENT_CODE.up) ? -1 : 1;
                timePickeOptions['start_scrollDown'](step);
                event.preventDefault();
                return;
            }
        };
        const getRangeAvaliableTime = (date) => {
            const avaliableMap = {
                hour: getAvaliableHours,
                minute: getAvaliableMinutes,
                second: getAvaliableSeconds,
            };
            let result = date;
            ['hour', 'minute', 'second'].forEach(_ => {
                if (avaliableMap[_]) {
                    let avaliableArr;
                    const method = avaliableMap[_];
                    if (_ === 'minute') {
                        avaliableArr = method(result.hour(), props.datetimeRole);
                    }
                    else if (_ === 'second') {
                        avaliableArr = method(result.hour(), result.minute(), props.datetimeRole);
                    }
                    else {
                        avaliableArr = method(props.datetimeRole);
                    }
                    if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
                        result = result[_](avaliableArr[0]);
                    }
                }
            });
            return result;
        };
        const parseUserInput = value => {
            if (!value)
                return null;
            return dayjs__default['default'](value, props.format);
        };
        const formatToString = value => {
            if (!value)
                return null;
            return value.format(props.format);
        };
        const getDefaultValue = () => {
            return dayjs__default['default'](defaultValue);
        };
        ctx.emit('set-picker-option', ['isValidValue', isValidValue]);
        ctx.emit('set-picker-option', ['formatToString', formatToString]);
        ctx.emit('set-picker-option', ['parseUserInput', parseUserInput]);
        ctx.emit('set-picker-option', ['handleKeydown', handleKeydown]);
        ctx.emit('set-picker-option', ['getRangeAvaliableTime', getRangeAvaliableTime]);
        ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue]);
        const timePickeOptions = {};
        const onSetOption = e => {
            timePickeOptions[e[0]] = e[1];
        };
        const pickerBase = vue.inject('EP_PICKER_BASE');
        const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props;
        const { getAvaliableHours, getAvaliableMinutes, getAvaliableSeconds, } = getAvaliableArrs(disabledHours, disabledMinutes, disabledSeconds);
        return {
            transitionName,
            arrowControl,
            onSetOption,
            t: locale.t,
            handleConfirm,
            handleChange,
            setSelectionRange,
            amPmMode,
            showSeconds,
            handleCancel,
            disabledHours,
            disabledMinutes,
            disabledSeconds,
        };
    },
});

const _hoisted_1$2 = {
  key: 0,
  class: "el-time-panel"
};
const _hoisted_2$1 = { class: "el-time-panel__footer" };

function render$2(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_time_spinner = vue.resolveComponent("time-spinner");

  return (vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
    default: vue.withCtx(() => [
      (_ctx.actualVisible || _ctx.visible)
        ? (vue.openBlock(), vue.createBlock("div", _hoisted_1$2, [
            vue.createVNode("div", {
              class: ["el-time-panel__content", { 'has-seconds': _ctx.showSeconds }]
            }, [
              vue.createVNode(_component_time_spinner, {
                ref: "spinner",
                role: _ctx.datetimeRole || 'start',
                "arrow-control": _ctx.arrowControl,
                "show-seconds": _ctx.showSeconds,
                "am-pm-mode": _ctx.amPmMode,
                "spinner-date": _ctx.parsedValue,
                "disabled-hours": _ctx.disabledHours,
                "disabled-minutes": _ctx.disabledMinutes,
                "disabled-seconds": _ctx.disabledSeconds,
                onChange: _ctx.handleChange,
                onSetOption: _ctx.onSetOption,
                onSelectRange: _ctx.setSelectionRange
              }, null, 8 /* PROPS */, ["role", "arrow-control", "show-seconds", "am-pm-mode", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onChange", "onSetOption", "onSelectRange"])
            ], 2 /* CLASS */),
            vue.createVNode("div", _hoisted_2$1, [
              vue.createVNode("button", {
                type: "button",
                class: "el-time-panel__btn cancel",
                onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.handleCancel && _ctx.handleCancel(...args)))
              }, vue.toDisplayString(_ctx.t('el.datepicker.cancel')), 1 /* TEXT */),
              vue.createVNode("button", {
                type: "button",
                class: "el-time-panel__btn confirm",
                onClick: _cache[2] || (_cache[2] = $event => (_ctx.handleConfirm()))
              }, vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 1 /* TEXT */)
            ])
          ]))
        : vue.createCommentVNode("v-if", true)
    ]),
    _: 1 /* STABLE */
  }, 8 /* PROPS */, ["name"]))
}

script$2.render = render$2;
script$2.__file = "packages/time-picker/src/time-picker-com/panel-time-pick.vue";

const makeSelectRange = (start, end) => {
    const result = [];
    for (let i = start; i <= end; i++) {
        result.push(i);
    }
    return result;
};
var script$3 = vue.defineComponent({
    components: { TimeSpinner: script$1 },
    props: {
        visible: Boolean,
        actualVisible: Boolean,
        parsedValue: {
            type: [Array, String],
        },
        format: {
            type: String,
            default: '',
        },
    },
    emits: ['pick', 'select-range', 'set-picker-option'],
    setup(props, ctx) {
        const minDate = vue.computed(() => props.parsedValue[0]);
        const maxDate = vue.computed(() => props.parsedValue[1]);
        const oldValue = vue.ref(props.parsedValue);
        const handleCancel = () => {
            ctx.emit('pick', oldValue.value, null);
        };
        const showSeconds = vue.computed(() => {
            return props.format.includes('ss');
        });
        const amPmMode = vue.computed(() => {
            if (props.format.includes('A'))
                return 'A';
            if (props.format.includes('a'))
                return 'a';
            return '';
        });
        const minSelectableRange = vue.ref([]);
        const maxSelectableRange = vue.ref([]);
        const handleConfirm = (visible = false) => {
            ctx.emit('pick', [minDate.value, maxDate.value], visible);
        };
        const handleMinChange = date => {
            handleChange(date.millisecond(0), maxDate.value);
        };
        const handleMaxChange = date => {
            handleChange(minDate.value, date.millisecond(0));
        };
        const isValidValue = _date => {
            const parsedDate = _date.map(_ => dayjs__default['default'](_));
            const result = getRangeAvaliableTime(parsedDate);
            return parsedDate[0].isSame(result[0]) && parsedDate[1].isSame(result[1]);
        };
        const handleChange = (_minDate, _maxDate) => {
            ctx.emit('pick', [_minDate, _maxDate], true);
        };
        const btnConfirmDisabled = vue.computed(() => {
            return minDate.value > maxDate.value;
        });
        const selectionRange = vue.ref([0, 2]);
        const setMinSelectionRange = (start, end) => {
            ctx.emit('select-range', start, end, 'min');
            selectionRange.value = [start, end];
        };
        const offset = vue.computed(() => showSeconds.value ? 11 : 8);
        const setMaxSelectionRange = (start, end) => {
            ctx.emit('select-range', start, end, 'max');
            selectionRange.value = [start + offset.value, end + offset.value];
        };
        const changeSelectionRange = step => {
            const list = showSeconds.value ? [0, 3, 6, 11, 14, 17] : [0, 3, 8, 11];
            const mapping = ['hours', 'minutes'].concat(showSeconds.value ? ['seconds'] : []);
            const index = list.indexOf(selectionRange.value[0]);
            const next = (index + step + list.length) % list.length;
            const half = list.length / 2;
            if (next < half) {
                timePickeOptions['start_emitSelectRange'](mapping[next]);
            }
            else {
                timePickeOptions['end_emitSelectRange'](mapping[next - half]);
            }
        };
        const handleKeydown = event => {
            const code = event.code;
            if (code === aria.EVENT_CODE.left || code === aria.EVENT_CODE.right) {
                const step = (code === aria.EVENT_CODE.left) ? -1 : 1;
                changeSelectionRange(step);
                event.preventDefault();
                return;
            }
            if (code === aria.EVENT_CODE.up || code === aria.EVENT_CODE.down) {
                const step = (code === aria.EVENT_CODE.up) ? -1 : 1;
                const role = selectionRange.value[0] < offset.value ? 'start' : 'end';
                timePickeOptions[`${role}_scrollDown`](step);
                event.preventDefault();
                return;
            }
        };
        const disabledHours_ = (role, compare) => {
            const defaultDisable = disabledHours ? disabledHours(role) : [];
            const isStart = role === 'start';
            const compareDate = compare || (isStart ? maxDate.value : minDate.value);
            const compareHour = compareDate.hour();
            const nextDisable = isStart ? makeSelectRange(compareHour + 1, 23) : makeSelectRange(0, compareHour - 1);
            return union__default['default'](defaultDisable, nextDisable);
        };
        const disabledMinutes_ = (hour, role, compare) => {
            const defaultDisable = disabledMinutes ? disabledMinutes(hour, role) : [];
            const isStart = role === 'start';
            const compareDate = compare || (isStart ? maxDate.value : minDate.value);
            const compareHour = compareDate.hour();
            if (hour !== compareHour) {
                return defaultDisable;
            }
            const compareMinute = compareDate.minute();
            const nextDisable = isStart ? makeSelectRange(compareMinute + 1, 59) : makeSelectRange(0, compareMinute - 1);
            return union__default['default'](defaultDisable, nextDisable);
        };
        const disabledSeconds_ = (hour, minute, role, compare) => {
            const defaultDisable = disabledSeconds ? disabledSeconds(hour, minute, role) : [];
            const isStart = role === 'start';
            const compareDate = compare || (isStart ? maxDate.value : minDate.value);
            const compareHour = compareDate.hour();
            const compareMinute = compareDate.minute();
            if (hour !== compareHour || minute !== compareMinute) {
                return defaultDisable;
            }
            const compareSecond = compareDate.second();
            const nextDisable = isStart ? makeSelectRange(compareSecond + 1, 59) : makeSelectRange(0, compareSecond - 1);
            return union__default['default'](defaultDisable, nextDisable);
        };
        const getRangeAvaliableTime = (dates) => {
            return dates.map((_, index) => getRangeAvaliableTimeEach(dates[0], dates[1], index === 0 ? 'start' : 'end'));
        };
        const { getAvaliableHours, getAvaliableMinutes, getAvaliableSeconds, } = getAvaliableArrs(disabledHours_, disabledMinutes_, disabledSeconds_);
        const getRangeAvaliableTimeEach = (startDate, endDate, role) => {
            const avaliableMap = {
                hour: getAvaliableHours,
                minute: getAvaliableMinutes,
                second: getAvaliableSeconds,
            };
            const isStart = role === 'start';
            let result = isStart ? startDate : endDate;
            const compareDate = isStart ? endDate : startDate;
            ['hour', 'minute', 'second'].forEach(_ => {
                if (avaliableMap[_]) {
                    let avaliableArr;
                    const method = avaliableMap[_];
                    if (_ === 'minute') {
                        avaliableArr = method(result.hour(), role, compareDate);
                    }
                    else if (_ === 'second') {
                        avaliableArr = method(result.hour(), result.minute(), role, compareDate);
                    }
                    else {
                        avaliableArr = method(role, compareDate);
                    }
                    if (avaliableArr && avaliableArr.length && !avaliableArr.includes(result[_]())) {
                        const pos = isStart ? 0 : avaliableArr.length - 1;
                        result = result[_](avaliableArr[pos]);
                    }
                }
            });
            return result;
        };
        const parseUserInput = value => {
            if (!value)
                return null;
            if (Array.isArray(value)) {
                return value.map(_ => dayjs__default['default'](_, props.format));
            }
            return dayjs__default['default'](value, props.format);
        };
        const formatToString = value => {
            if (!value)
                return null;
            if (Array.isArray(value)) {
                return value.map(_ => _.format(props.format));
            }
            return value.format(props.format);
        };
        const getDefaultValue = () => {
            if (Array.isArray(defaultValue)) {
                return defaultValue.map(_ => dayjs__default['default'](_));
            }
            return [
                dayjs__default['default'](defaultValue),
                dayjs__default['default'](defaultValue).add(60, 'm'),
            ];
        };
        ctx.emit('set-picker-option', ['formatToString', formatToString]);
        ctx.emit('set-picker-option', ['parseUserInput', parseUserInput]);
        ctx.emit('set-picker-option', ['isValidValue', isValidValue]);
        ctx.emit('set-picker-option', ['handleKeydown', handleKeydown]);
        ctx.emit('set-picker-option', ['getDefaultValue', getDefaultValue]);
        ctx.emit('set-picker-option', ['getRangeAvaliableTime', getRangeAvaliableTime]);
        const timePickeOptions = {};
        const onSetOption = e => {
            timePickeOptions[e[0]] = e[1];
        };
        const pickerBase = vue.inject('EP_PICKER_BASE');
        const { arrowControl, disabledHours, disabledMinutes, disabledSeconds, defaultValue } = pickerBase.props;
        return {
            arrowControl,
            onSetOption,
            setMaxSelectionRange,
            setMinSelectionRange,
            btnConfirmDisabled,
            handleCancel,
            handleConfirm,
            t: locale.t,
            showSeconds,
            minDate,
            maxDate,
            amPmMode,
            handleMinChange,
            handleMaxChange,
            minSelectableRange,
            maxSelectableRange,
            disabledHours_,
            disabledMinutes_,
            disabledSeconds_,
        };
    },
});

const _hoisted_1$3 = {
  key: 0,
  class: "el-time-range-picker el-picker-panel"
};
const _hoisted_2$2 = { class: "el-time-range-picker__content" };
const _hoisted_3$1 = { class: "el-time-range-picker__cell" };
const _hoisted_4 = { class: "el-time-range-picker__header" };
const _hoisted_5 = { class: "el-time-range-picker__cell" };
const _hoisted_6 = { class: "el-time-range-picker__header" };
const _hoisted_7 = { class: "el-time-panel__footer" };

function render$3(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_time_spinner = vue.resolveComponent("time-spinner");

  return (_ctx.actualVisible)
    ? (vue.openBlock(), vue.createBlock("div", _hoisted_1$3, [
        vue.createVNode("div", _hoisted_2$2, [
          vue.createVNode("div", _hoisted_3$1, [
            vue.createVNode("div", _hoisted_4, vue.toDisplayString(_ctx.t('el.datepicker.startTime')), 1 /* TEXT */),
            vue.createVNode("div", {
              class: [{ 'has-seconds': _ctx.showSeconds, 'is-arrow': _ctx.arrowControl }, "el-time-range-picker__body el-time-panel__content"]
            }, [
              vue.createVNode(_component_time_spinner, {
                ref: "minSpinner",
                role: "start",
                "show-seconds": _ctx.showSeconds,
                "am-pm-mode": _ctx.amPmMode,
                "arrow-control": _ctx.arrowControl,
                "spinner-date": _ctx.minDate,
                "disabled-hours": _ctx.disabledHours_,
                "disabled-minutes": _ctx.disabledMinutes_,
                "disabled-seconds": _ctx.disabledSeconds_,
                onChange: _ctx.handleMinChange,
                onSetOption: _ctx.onSetOption,
                onSelectRange: _ctx.setMinSelectionRange
              }, null, 8 /* PROPS */, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onChange", "onSetOption", "onSelectRange"])
            ], 2 /* CLASS */)
          ]),
          vue.createVNode("div", _hoisted_5, [
            vue.createVNode("div", _hoisted_6, vue.toDisplayString(_ctx.t('el.datepicker.endTime')), 1 /* TEXT */),
            vue.createVNode("div", {
              class: [{ 'has-seconds': _ctx.showSeconds, 'is-arrow': _ctx.arrowControl }, "el-time-range-picker__body el-time-panel__content"]
            }, [
              vue.createVNode(_component_time_spinner, {
                ref: "maxSpinner",
                role: "end",
                "show-seconds": _ctx.showSeconds,
                "am-pm-mode": _ctx.amPmMode,
                "arrow-control": _ctx.arrowControl,
                "spinner-date": _ctx.maxDate,
                "disabled-hours": _ctx.disabledHours_,
                "disabled-minutes": _ctx.disabledMinutes_,
                "disabled-seconds": _ctx.disabledSeconds_,
                onChange: _ctx.handleMaxChange,
                onSetOption: _ctx.onSetOption,
                onSelectRange: _ctx.setMaxSelectionRange
              }, null, 8 /* PROPS */, ["show-seconds", "am-pm-mode", "arrow-control", "spinner-date", "disabled-hours", "disabled-minutes", "disabled-seconds", "onChange", "onSetOption", "onSelectRange"])
            ], 2 /* CLASS */)
          ])
        ]),
        vue.createVNode("div", _hoisted_7, [
          vue.createVNode("button", {
            type: "button",
            class: "el-time-panel__btn cancel",
            onClick: _cache[1] || (_cache[1] = $event => (_ctx.handleCancel()))
          }, vue.toDisplayString(_ctx.t('el.datepicker.cancel')), 1 /* TEXT */),
          vue.createVNode("button", {
            type: "button",
            class: "el-time-panel__btn confirm",
            disabled: _ctx.btnConfirmDisabled,
            onClick: _cache[2] || (_cache[2] = $event => (_ctx.handleConfirm()))
          }, vue.toDisplayString(_ctx.t('el.datepicker.confirm')), 9 /* TEXT, PROPS */, ["disabled"])
        ])
      ]))
    : vue.createCommentVNode("v-if", true)
}

script$3.render = render$3;
script$3.__file = "packages/time-picker/src/time-picker-com/panel-time-range.vue";

dayjs__default['default'].extend(customParseFormat__default['default']);
var TimePicker = vue.defineComponent({
    name: 'ElTimePicker',
    install: null,
    props: Object.assign(Object.assign({}, defaultProps), { isRange: {
            type: Boolean,
            default: false,
        } }),
    emits: ['update:modelValue'],
    setup(props, ctx) {
        const type = props.isRange ? 'timerange' : 'time';
        const panel = props.isRange ? script$3 : script$2;
        return () => vue.h(script, Object.assign(Object.assign({ format: DEFAULT_FORMATS_TIME }, props), { type, 'onUpdate:modelValue': value => ctx.emit('update:modelValue', value) }), {
            default: scopedProps => vue.h(panel, scopedProps),
        });
    },
});

const rangeArr = n => {
    return Array.from(Array(n).keys());
};
const extractDateFormat = format => {
    return format
        .replace(/\W?m{1,2}|\W?ZZ/g, '')
        .replace(/\W?h{1,2}|\W?s{1,3}|\W?a/gi, '')
        .trim();
};
const extractTimeFormat = format => {
    return format
        .replace(/\W?D{1,2}|\W?Do|\W?d{1,4}|\W?M{1,4}|\W?Y{2,4}/g, '')
        .trim();
};

TimePicker.install = (app) => {
    app.component(TimePicker.name, TimePicker);
};

exports.CommonPicker = script;
exports.DEFAULT_FORMATS_DATE = DEFAULT_FORMATS_DATE;
exports.DEFAULT_FORMATS_DATEPICKER = DEFAULT_FORMATS_DATEPICKER;
exports.DEFAULT_FORMATS_TIME = DEFAULT_FORMATS_TIME;
exports.TimePickPanel = script$2;
exports.default = TimePicker;
exports.defaultProps = defaultProps;
exports.extractDateFormat = extractDateFormat;
exports.extractTimeFormat = extractTimeFormat;
exports.rangeArr = rangeArr;
